<template>
  <a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item ref="title" label="记录名称" prop="title">
      <a-input
        v-model="form.title"
        @blur="
          () => {
            $refs.title.onFieldBlur();
          }
        "
      />
    </a-form-model-item>
    <a-form-model-item label="突想日期" required prop="datetime">
      <a-date-picker  v-model="form.datetime"  show-time  type="date"  placeholder="Pick a date"  style="width: 100%;" />
    </a-form-model-item>
    <a-form-model-item label="记录类型" prop="type">
      <a-radio-group v-model="form.type">
        <a-radio value="1">
          代码
        </a-radio>
        <a-radio value="2">
          文字
        </a-radio>
      </a-radio-group>
    </a-form-model-item>

    <a-form-model-item label="图片">
      <a-upload
        action="http://localhost:4000/updateFiles"
        list-type="picture-card"
        :file-list="fileList"
        @preview="handlePreview"
        @change="handleChange"
      >
        <div v-if="fileList.length < 8">
          <a-icon type="plus" />
          <div class="ant-upload-text">Upload</div>
        </div>
      </a-upload>
      <a-modal
        :visible="previewVisible"
        :footer="null"
        @cancel="handleCancel"
      >
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
    </a-form-model-item>


    <a-form-model-item label="内容" prop="txt">
      <a-input v-model="form.txt" type="textarea" />
    </a-form-model-item>

    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">
        提交
      </a-button>
      <a-button style="margin-left: 10px;" @click="resetForm">
        重置
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
  import mixins from '@/mixins/mixins'
  import FingerprintJS from'@fingerprintjs/fingerprintjs'
  import { scatteredAdd } from '../../api/api'
  // const fpPromise = import('https://openfpcdn.io/fingerprintjs/v3')
  export default {
    mixins:[mixins],
    data() {
      return {
        fileList:[],
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        other: '',
        form: {
          title: '',
          datetime: undefined,
          type: '',
          txt: '',
        },
        rules: {
          title: [
            { required: true, message: '记录名称不能为空哦！', trigger: 'blur' },
            { min: 1, message: '内容不能少于2位数 ', trigger: 'blur' },
          ],
          datetime: [{ required: true, message: '突想日期方便记录当什么时候想起的知识点', trigger: 'change' }],
          type: [
            { required: true, message: '记录类型必选', trigger: 'change' },
          ],
          txt: [{ required: true, message: '由内容才能够提交哦', trigger: 'blur' }],
        },
      };
    },
    methods: {
      onSubmit() {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
          const data = await scatteredAdd({
            ...this.form,
            type:parseInt(this.form.type),
            datetime:this.timeFormatsss(this.form.datetime),
            cover:this.cover
          });

            data ?  this.$message.success('发布文章成功') :  this.$message.success('发布文章失败，稍后在尝试')

          } else {

            console.log('error submit!!');
            return false;
          }
        });
      },
      async resetForm() {
        console.log(FingerprintJS)

      const ddd = await  FingerprintJS.load().then(fp => fp.get()) .then(result => {
          return result ;console.log(result)
            // const visitorId = result.visitorId
            // console.log(visitorId)
            // this.form.txt = visitorId
          })
        console.log(ddd,'ddd')
        console.log(this.timeFormatsss('2021-12-01T09:41:29.000Z'))
        this.$refs.ruleForm.resetFields();
      },
    },
  };
</script>
